<template>
  <div>
    <el-breadcrumb separator=">" style="font-size: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">月租用户列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-form :inline="true" :model="search" class="user-search">
      <el-form-item label="搜索">
        <el-input size="small" v-model="search.realName" placeholder="输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="search.cardId" placeholder="输入身份证号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="search.phone" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="sel()">搜索</el-button>
      </el-form-item>
    </el-form>


    <div>
      <el-row>
        <el-col span="6" v-for="people in tableData">
          <el-card style="width: 280px;height: 300px;background-color: rgba(255,255,255,0.3);margin: 20px 20px" >
            <div>
              <img style="border-radius: 50%;width: 100px;height: 100px" src="../assets/imgs/hand.png" alt="">
            </div>
            <br>
            <span style="margin: 10px 10px">姓名：{{people.realName}}</span>
            <br>
            <span style="margin: 10px 10px">身份证：{{people.cardId}}</span>
            <br>
            <span style="margin: 10px 10px">电话：{{people.phone}}</span>
            <br>
            <el-button type="primary" icon="el-icon-edit" circle size="mini"
                       @click="openEditDialog(people.cardId)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="mini"
                       @click="openDeleteConfirm(people.cardId)"></el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>



    <!-- 以下是弹出的修改相册的对话框 -->

    <el-dialog title="编辑月租用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="realName" :label-width="formLabelWidth">
          <el-input disabled v-model="editForm.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="cardId" :label-width="formLabelWidth">
          <el-input disabled v-model="editForm.cardId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="editForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      editForm: {
        id: '',
        realName: '',
        cardId: '',
        carId: '',
        phone: ''
      },
      search: {},
      formLabelWidth: '120px',

      rules: {
        realName: [
          {required: true, message: '姓名', trigger: 'blur'},
          {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ],
        cardId: [
          {required: true, message: '身份证号码', trigger: 'blur'},
          {min: 18, max: 18, message: '输入正确的身份证号码', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '输入正确的手机号', trigger: 'blur'}
        ],
      }
    };
  },
  methods: {

    sel() {
      let url = 'http://localhost:8080/mouthUser/search'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, this.search).then((response) => {
        let responseBody = response.data;
        if (responseBody.code = 200) {
          this.tableData = responseBody.data;
        } else {
          this.$message({
            type: 'error',
            message: responseBody.message
          });
        }
      });
    },
    //提示删除消息的提示框方法
    openDeleteConfirm(cardId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMouthUser(cardId);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
    /*打开更改提示框*/
    openEditDialog(cardId) {
      let url = 'http://localhost:8080/mouthUser/getMouthUserByCard?cardId=' + cardId;
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.code == 200) {
          this.editForm = responseBody.data;
          console.log(this.editForm)
          this.dialogFormVisible = true;
        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadUserList();
            }
          });
        }
      });
    }
    ,
    /*真正执行修改信息请求*/
    submitEditForm() {
      let url = 'http://localhost:8080/mouthUser/updateMouthUserAll'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, this.editForm).then((response) => {
        let responseBody = response.data;
        if (responseBody.code == 200) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.loadUserList();
        } else if (responseBody.state == 404) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadUserList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      })
    }
    ,

    /*逻辑删除月租用户*/
    deleteMouthUser(cardId) {
      let url = 'http://localhost:8080/mouthUser/deleteMouthUser?cardId=' + cardId;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        console.log(MouthUser.cardId)
        let responseBody = response.data;
        if (responseBody.code == 200) {
          this.$message({
            message: '删除该用户成功！',
            type: 'success'
          });
          this.loadUserList();
        } else if (responseBody.state == 404) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadUserList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      })
    }
    ,
    //请求月租用户列表
    loadUserList() {
      let url = 'http://localhost:8080/mouthUser/MouthUserList'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.code == 200) {
          this.tableData = responseBody.data;
        }
      })
    }
  }
  ,
  created() {
    this.loadUserList()
  }
}
</script>
